import React, { useContext, useState } from "react"

const ThemeContext = React.createContext({})

export default function Context() {

  const [theme, setTheme] = useState('dark')

  return (
    <>
      <h1>useContext</h1>
      <div>父亲</div>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>切换</button>
      <hr />
      {/* 18版本 */}
      {/* <ThemeContext.Provider value={{ theme, setTheme }}>
        <Child />
      </ThemeContext.Provider> */}

      {/* 19版本 */}
      <ThemeContext value={{ theme, setTheme }}>
        <Child />
      </ThemeContext>
    </>
  )
}

const Child = () => {

  return (
    <>
      <div>孩子</div>
      <hr />
      <Sunzi />
    </>
  )
}

const Sunzi = () => {

  const theme = useContext(ThemeContext)
  console.log('theme',theme);
  

  return (
    <>
      <div>孙子</div>
      <div>theme: {theme.theme}</div>
    </>
  )

}